<template>
  <div class="home">
    <div class="home_background">
      <van-sticky>
        <!-- 头部导航栏 -->
        <van-nav-bar>
          <template #left>
            <van-icon name="plus" size="18" @click="cityQuery" /><span>{{ name?name:"武汉" }}</span>
          </template>
          <template #right>
            <van-icon name="comment-o" />
            <van-icon name="share-o" />
          </template>
        </van-nav-bar>
          
        
        <NavbarView></NavbarView>
      </van-sticky>
      <HomeMessView></HomeMessView>
      <div class="yubao">
        <div>
          <div class="data" ><span>今天</span><span><van-tag type="success">{{airList[0]?.quality}}</van-tag></span></div>
          <div>首要污染物:PM2.5</div>
          <div><span>{{ tempList[0]?.low }}°-{{ tempList[0]?.high }}°</span><span>{{ tempList[0]?.text_day }}</span></div>
        </div>
        <div>
          <div class="data"><span>明天</span><span><van-tag type="success">{{ airList[1]?.quality }}</van-tag></span></div>
          <div>首要污染物:PM10</div>
          <div><span>{{ tempList[1]?.low }}°-{{ tempList[1]?.high }}°</span><span>{{ tempList[1]?.text_day }}</span></div>
        </div>
       
      </div>
    </div>
    <HomeHour></HomeHour>
    <FiveDay></FiveDay>
    <EcharsAqi></EcharsAqi>
    <baidu-map class="bm-view" center="北京">
  </baidu-map>
  </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import type { Ref } from "vue";
import {cityInfoStore} from "../store/index"
import {fulAirQuery,fulTempQuery} from "../service/cityService"
import NavbarView from '../components/navbar/IndexView.vue'
import HomeMessView  from "../components/home/HomeMessView.vue"
import HomeHour from "../components/home/HomeHour.vue"
import FiveDay from '@/components/home/FiveDay.vue';
import EcharsAqi from '@/components/home/EcharsAqi.vue';

interface IAir{
  aqi:string;
  pm25:string;
  pm10:string;
  so2:string;
  no2:string;
  o3:string;
  date:string;
  quality:string;
}

let store=cityInfoStore();
let router = useRouter()
let airList:Ref<IAir[]>=ref([]);
let tempList: any=ref([]);
let id=ref("");
let name=ref("武汉");
let aa=localStorage.getItem('city');
if(aa?.length){
  id.value=JSON.parse(aa).id;
name.value=JSON.parse(aa).name;
}


let fulairList=async()=>{
  let {data}=await fulAirQuery({'key':'S_kv1Ro8FrmQ4UeD9','location':name.value,'language':'zh-Hans'});
  airList.value=data.results[0].daily;
   //把空气的值，天气的值存储到全局
  store.setAirInfo(data.results[0].daily)
}
let  fulTempList=async()=>{
  let {data}=await fulTempQuery({'key':'S_kv1Ro8FrmQ4UeD9','location':name.value,'language':'zh-Hans','unit':"c",'start':0,'days':5})
  let list= data.results[0].daily;
  tempList.value=list
   //把空气的值，天气的值存储到全局
  store.setTempInfo(data.results[0].daily)
}
let cityQuery = () => {
  router.push('/city')
}
onMounted(async()=>{
  await fulairList();
  await fulTempList();
})
</script>

<style scoped lang="scss">

.home_background {
  background: url('https://pic.616pic.com/bg_w1180/00/01/10/pGHimdEVV5.jpg');
  background-size: 100% 100%;
  height: 500px;
  position: relative;
  .yubao{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content:space-between;
    width: 100%;
    padding: 10px;
    color: #fff;
    background: rgba($color: #000, $alpha: 0.2);
    text-align: center;
    div{
      line-height: 30px ;
    }
    .data{
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    span{
      box-sizing: border-box;
      font-size: 12px;
      font-weight: 500;
      margin-right: 5px;
    }
  }
  span {
    font-size: 17px;
    font-weight: 700;
  }
  :deep(.van-nav-bar__content) {
    background: rgba(46, 176, 247, 0.9);
    color: #fff;
    .van-icon {
      color: #fff;
      margin: 0 5px;
      font-size: 20px;
    }
  }
}
</style>
